<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/jquery-confirm.min.css">

	<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			#addnewterminal {
				width: 100%;
				background: #8a6de9;
				line-height: 1.42;
				display: inline-block;
				margin-bottom: 0;
				padding: 6px 12px;
				cursor: pointer;
				margin: 0 auto;
				border: 1px solid #8a6de9;
				font-size: 17px;
			}
			
			.mui-card {
				/*width: 80%;
				left: 10%;*/
				box-shadow: 0px 0px 0px #333333;
				border: 0px;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background-color: white;
			}
			
			.mui-card-header {}
			
			.mui-card-header>img:first-child {
				width: 40%;
				height: auto;
				margin-left: 30%;
				margin-top: 20px;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: white !important;
				font-size: large;
			}
			
			.mui-input-row {
				border-color: #9966ff;
				border: 1px solid #9966FF;
				border-radius: 5px;
				width: 80%;
				left: 10%;
				margin-top: 15px;
			}
			
			.mui-input-row label~input {
				width: 62%;
				text-align: left;
			}
			
			.mui-input-row label {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#9933cc), to(#6699ff));
				color: white;
				font-size: large;
				font-size: 1em;
				height: 100%;
				width: 35%;
				padding: 11px 14px;
			}
			
			.mui-icon-help {
				color: orange;
				position: absolute;
				font-size: xx-large;
				right: 10%;
				top: 20%;
				/*bottom: 0px;*/
			}
			
			.mui-input-row.mui-input-range {
				overflow: visible;
				padding-right: 0px;
			}
			
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-group .mui-input-row:after {
				background: none
			}
		</style>

</head>

<body>
<div class="mui-card">
	<!--页眉，放置标题-->
	<div class="mui-card-header">
		<img src="images/wifi.png">
		<span class="mui-icon mui-icon-help"></span>
	</div>
	<!--内容区-->
	<div class="mui-card-content">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>wifi名称</label>
				<input id="wifissid" type="text" class="mui-input-clear" placeholder="wifi sid">
			</div>
			<div class="mui-input-row">
				<label>wifi密码</label>
				<input id="wifipassword" type="text" class="mui-input-clear" placeholder="wifi password">
			</div>
			<!--<div class="mui-input-row">
                <label style="width:25%">任务数</label>
                <input id="taskcount" type="text" class="mui-input-clear" placeholder="number" value="1">
                <input id="numbersoftasktext" type="text" class="mui-input-clear" placeholder="1~5" value="1">
<input id="numbersoftask" type="range" min="1" max="5" value="1">
            </div>-->
			<!--<div class="mui-input-row">
                <label style="width:30%">设备名称</label>
                <input id=" " type="text" class="mui-input-clear" placeholder="name">
            </div>
            <div class="mui-input-row">
                <label style="width:30%">设备SN</label>
                <input type="text" class="mui-input-clear" placeholder="the SN">onclick="pluginShow()"

            </div>-->
			<div class="mui-input-row" style="text-align: center;margin-top:40px">
				<button type="button" class="mui-btn mui-btn-primary " id="addnewterminal" >开始配置</button>
			</div>
		</form>
	</div>
	<!--页脚，放置补充信息或支持的操作-->
	<!--<div class="mui-card-footer">


</div>-->
</div>

<div id="readme" style="display: none;">

	<ol>
		<li style="text-align: left;">确保手机连入wifi。</li>
		<li style="text-align: left;">按住设备上的……</li>
		<li style="text-align: left;">按住控制器“+”键后接通控制器电源，至通信收发指示快速闪烁后松开。</li>
		<li style="text-align: left;">点击“开始配置”按钮。等待配置成功。</li>

	</ol>
	<p> 配置时间长短根据WIFI信号的强弱和启动配置的时机，会有不同，如配置失败，重新在APP中点“开始配置”按钮。</p>
	<h4>指示灯状态</h4>
	<p>

		WIFI连接成功，WIFI连接指示灯亮，否则灭。</p>
	<p>云服务连接成功，云端连接指示灯亮，否则灭。</p>
	<p>WIFI有数据收发时，通信收发指示灯闪烁。</p>
</div>

<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script src="libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
<script src="js/jquery-confirm.min.js"></script>
<script src="js/dateformat.js"></script>
<script src="js/esptouch.js"></script>
<script type="text/javascript">
			var selectStr = '<select class="configtype mui-btn mui-btn-block">';
			
			function addTerminalCallback(data) {
				//console.log(data);
				$.alert(data.returnMessage);
				//initList();
			}

			function addTerminal(sn) {

				var content = '' +
					'<form action="" class="formName">' +
					'<div class="form-group">' +
					'<label>设备类型</label>' + selectStr +
					'</select>' +
					'<label>为您的设备起个名字吧</label>' +
					'<input type="text" placeholder="设备名称" class="name form-control" required />' +
					'<label>设备序号</label>' +
					'<input type="text" placeholder="SN" class="sn form-control" readonly="readonly" required value="' + sn +
					'" /></div>' +
					'</form>';
				jQuery.confirm({
					title: '添加此设备',
					content: content,
					boxWidth: '80%',
					useBootstrap: false,
					buttons: {
						formSubmit: {
							text: '确认',
							btnClass: 'btn-blue',
							action: function() {
								var configtype = this.$content.find('.configtype').val();
								var name = this.$content.find('.name').val();
								var sn = this.$content.find('.sn').val();
								if(!name || !sn) {
									$.alert('未填写正确');
									return false;
								}
								//console.log(configtype);
								app.addTerminal(configtype, name, sn, addTerminalCallback);
							}
						},
						cancel: {
							text: '取消',
							action: function() {

							}
						},
					},
					onContentReady: function() {
						// bind to events
						var jc = this;
						this.$content.find('form').on('submit', function(e) {
							// if the user submits the form by pressing enter in the field.
							e.preventDefault();
							jc.$$formSubmit.trigger('click'); // reference the button and click it
						});
					}
				});
			}

			function setTerminalWifi() {
				//addTerminal("123");
				var wifissid = jQuery("#wifissid").val();
				//alert(wifissid);
				var wifipassword = jQuery("#wifipassword").val();
				//alert(wifipassword);
				var taskcount = "1";//jQuery("#taskcount").val();
					//alert(taskcount);
				if(plus) {
					plus.esptouch.setTerminalWifi(wifissid, wifipassword, taskcount, function(result) {
						$.confirm({
							title: '设备配置成功!',
							type: 'green',
							content: '' +
								'<form class="mui-input-group">' +
								'<div class="mui-input-row"><label>IP地址</label>' +
								'<input type="text" class="mui-input-clear" readonly="readonly" value="' + result[1] +
								'"/> </div><div class="mui-input-row"><label>Mac地址</label>' +
								'<input type="text" class="mui-input-clear" readonly="readonly" value="' + result[0] +
								'"/></div> </form>',
							buttons: {
								confirm: {
									text: '立刻添加',
									action: function() {
										addTerminal(result[0]);
									}
								},
								cancel: {
									text: '取消',
									action: function() {

									}
								}
							}
						});
						//alert(result[0] + "_" + result[1] + "_" + result[2] + "_" + result[3]);
						//console.log(result);
					}, function(result) {
						$.alert({
							title: '设备配置失败!',
							type: 'red',
							content: result[0]
						});
					});
				}

			}

			function getWifi() {
				if(plus) {
					plus.esptouch.getWifi(function(result) {
						jQuery("#wifissid").val(result[0]);
						console.log(result[1]);
					}, function(result) {
						jQuery("#wifissid").attr(result[0]);
					});
				}
			}

			document.addEventListener("plusready", function() {
				getWifi();
			});

			function initList() {

				app.getServerConfig(function(serverconfig) {
					jQuery.each(serverconfig, function(index, data) {
						selectStr += '<option value="' + data.configID + '">' + data.configName + '</option>';

					});
//					app.getTerminal("", function(terminals) {
//						var terminaldiv = jQuery("#terminaldiv").empty();
//
//						jQuery.each(terminals, function(index, data) {
//							console.log(data);
//							var template = jQuery("#terminal-template").clone();
//							template.attr("id", "terminaldiv_" + data.id);
//							template.data("id", data.id);
//							template.show();
//
//							template.find(".terminalNameSpan").html(data.terminalName);
//
//							template.find(".terminalName").val(data.terminalName);
//							template.find(".terminalSn").val(data.sn);
//							template.find(".terminalCname").val(data.socketServerConfig.configName);
//							template.find(".terminalTime").val(new Date(data.addTime).toString());
//
//							terminaldiv.append(template);
//
//						});
//					});
				});
			}

			function changeCallBack() {
				app.freshTerminal();
				initList();
			}

			function initPage() {
				initList();

//				jQuery(document).on("click", ".btn-terminal", function(e) {
//					//console.log(e);
//					var button = jQuery(e.target);
//					var li = button.parents("li");
//					var id = li.data("id");
//					var name = li.find(".terminalName").val();
//					var sn = li.find(".terminalSn").val();
//					if(button.hasClass("btn-update")) {
//						app.updateTerminal(id, name, sn, changeCallBack);
//					} else {
//						app.delTerminal(id, changeCallBack);
//					}
//					console.log(id);
//					console.log(name);
//				});

				jQuery(".mui-icon-help").click(function() {
					jQuery.alert({
						title: '使用说明!',
						content: jQuery("#readme").html(),
						theme: 'supervan'
					});
				});

				jQuery("#numbersoftask").change(function() {
					jQuery("#numbersoftasktext").val(this.value);
				})

//				jQuery("#addnewterminal").click(function() {
//					addTerminal("123");
//					//					mui.alert('测试getWifi', 'title', 'btnValue', function(e) {
//					//						getWifi();
//					//					}, 'div');
//					//					mui.toast('施工中', {
//					//						duration: 'long',
//					//						type: 'div'
//					//					})
//					//					pluginShow();
//				});
				jQuery("#addnewterminal").click(function(){
					setTerminalWifi();
				});
				getWifi();
			}

			jQuery(document).ready(initPage);
		</script>
</body>

</html>